<!--
功能：个人申请界面,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/6 23:42,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div class="box">
    <div class="title">物品报修申请</div>
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="编号">
        </el-table-column>
        <el-table-column
          v-for="t in table"
          :key="t.id"
          :prop="t.prop"
          :label="t.label">
        </el-table-column>
      </el-table>
    </div>
    <div class="title">物品遗失申请</div>
    <div class="table">
      <el-table
        :data="lostData"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="编号">
        </el-table-column>
        <el-table-column
          v-for="t in table"
          :key="t.id"
          :prop="t.prop"
          :label="t.label">
        </el-table-column>
      </el-table>
    </div>
    <div class="title">更换寝室申请</div>
    <div class="table">
      <el-table
        :data="changeData"
        stripe
        title="123"
        style="width: 100%">
        <el-table-column
          type="index"
          width="80"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="statue"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注">
        </el-table-column>
        <el-table-column
          label="主动申请----对方信息">
          <el-table-column
            v-for="t in change"
            :label="t.label"
            :prop="t.prop"
            :key="t.id">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="table">
      <el-table
        :data="passiveData"
        stripe
        title="123"
        style="width: 100%">
        <el-table-column
          type="index"
          width="80"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="statue"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注">
        </el-table-column>
        <el-table-column
          label="被动申请----对方信息">
          <el-table-column
            v-for="t in change"
            :label="t.label"
            :prop="t.prop"
            :key="t.id">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-note">
      <span class="sp1">温馨提示 :</span>
      <ul>
        <li v-for="i in lis" :key="i.id">
          <span class="sp2"><i :class="i.icon"></i></span>
          <span class="sp3">{{i.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {message} from "@/utils/age";

export default {
  name:'ChangeRepair',
  data() {
    return {
      lostData:[],
      passiveData:[],
      change:[{
        id:1,
        label:'姓名',
        prop:'user.name'
      },{
        id:2,
        label:'学号',
        prop:'user.account'
      },{
        id:3,
        label:'电话',
        prop:'user.phone'
      },{
        id:4,
        label:'专业',
        prop:'user.professional'
      },{
        id:5,
        label:'班级',
        prop:'user.grade'
      },{
        id:6,
        label:'床位',
        prop:'beds.name'
      },{
        id:7,
        label:'房间',
        prop:'room.name'
      },{
        id:8,
        label:'楼层',
        prop:'floor.name'
      }],
      changeData:[],
      lis: [{
        id: 1,
        name: '本页面的所有内容均保存一个学期的时间',
        icon: 'el-icon-question'
      },{
        id: 2,
        name: '学生离校之后，系统会自动的删除所有的申请信息m,无需手动删除。',
        icon: 'el-icon-question'
      },{
        id: 3,
        name: '本页面的所有内容仅仅用于参考，如遇信息存在错误，请联系所在楼层的管理员。',
        icon: 'el-icon-question'
      }],
      multipleSelection: [],
      table: [{
        id: 1,
        prop: 'applytime',
        label: '申请日期'
      }, {
        id: 2,
        label: '申请内容',
        prop: 'content'
      }, {
        id: 3,
        label: '进度',
        prop: 'process'
      }, {
        id: 4,
        label: '处理人',
        prop: 'user.name'
      }, {
        id: 5,
        label: '处理人电话',
        prop: 'user.phone'
      }, {
        id: 6,
        label: '备注',
        prop: 'txt'
      }],
      tableData: []
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.findMyApply()
    this.findChangeRoom()
  },
  methods: {
    findMyApply() {
      this.$http.get('user/apply').then(response => {
        if (response.data) {
          this.tableData = response.data
          message("success", "成功")
        } else {
          message("error", "报修内容为空！")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    },
    //  选中操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  //  查询自己的换寝室申请
    findChangeRoom(){
      this.$http.get('user/changeRoom').then(response => {
        if (response.data) {
          this.changeData = response.data.accord
          this.passiveData = response.data.passive
          message("success", "成功")
        } else {
          message("error", "报修内容为空！")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    },
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>

/*提示消息展示*/
.box-note {
  width: 100%;
  margin-top: 50px;
  height: 200px;
  /*background-color: pink;*/
}
li{
  list-style: none;
  margin: 10px 0;
  letter-spacing: 4px;
  font-size: 18px;
}
.sp1{
  font-size: 20px;
}
.sp3{
  color: #909399;
}
/**/

.box {
  width: 100%;
}

.table {
  margin-top: 40px;
}

/*表格内容居中显示*/
.table /deep/ .el-table th > .cell {
  text-align: center;
}

.table /deep/ .el-table .cell {
  text-align: center;
}

/**/
</style>

<style scoped>
.title{
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  margin: 10px 0;
  box-sizing: border-box;
  border-left: 5px solid #000000;
  padding-left: 10px;
  color: #909399;
  /*background-color: pink;*/
}
.table{
  min-height: 200px;
}
</style>
